<template>
  <div class="mindmap-wrapper">
    <div class="search-controls">
      <h2>WBS思维导图</h2>
      <div class="search-box">
        <input
          v-model="searchKeyword"
          placeholder="输入关键词搜索"
          @keyup.enter="handleSearch"
        />
        <button @click="handleSearch">搜索</button>
        <button @click="clearSearch">清除</button>
        <span v-if="searchCount > 0" class="search-count">
          找到 {{ searchCount }} 个结果
        </span>
      </div>
    </div>

    <!-- 层级颜色说明 -->
    <div class="level-legend">
      <div class="legend-title">层级颜色说明</div>
      <div class="legend-items">
        <div
          class="legend-item"
          v-for="levelInfo in levelColors"
          :key="levelInfo.level"
        >
          <div
            class="legend-color"
            :style="{ backgroundColor: levelInfo.color }"
          ></div>
          <span class="legend-text">{{ levelInfo.label }}</span>
        </div>
      </div>
    </div>

    <!-- 根节点容器：确保顶层居中 -->
    <div class="mindmap-root">
      <mind-map-node :node="mindMapData" ref="rootNode" />
    </div>
  </div>
</template>

<script>
import MindMapNode from './MindMapNode.vue';

export default {
  components: {
    MindMapNode,
  },
  data() {
    return {
      searchKeyword: '',
      searchCount: 0,
      levelColors: [
        { level: 1, color: '#FF6B6B', label: '第一层级' },
        { level: 2, color: '#4ECDC4', label: '第二层级' },
        { level: 3, color: '#45B7D1', label: '第三层级' },
        { level: 4, color: '#A37EBD', label: '第四层级' },
        { level: 5, color: '#FF8C00', label: '第五层级' },
        { level: 6, color: '#da58e8', label: '第六层级' },
        { level: 7, color: '#20B2AA', label: '第七层级' },
        { level: 8, color: '#FF6347', label: '第八层级' },
        { level: 9, color: '#4682B4', label: '第九层级' },
        { level: 10, color: '#9ACD32', label: '第十层级+' },
      ],
      mindMapData: {
        id: 1,
        label: 'WBS思维导图',
        children: [
          {
            id: 10000,
            label: '核心原理',
            children: [
              {
                id: 10001,
                label: '响应式系统',
                children: [
                  {
                    id: 10002,
                    label: 'Observer',
                    children: [
                      {
                        id: 10003,
                        label: '对象监听',
                        children: [
                          {
                            id: 10004,
                            label: '属性劫持',
                            children: [
                              {
                                id: 10005,
                                label: '深度监听',
                                children: [
                                  {
                                    id: 10006,
                                    label: '嵌套对象处理',
                                    children: [],
                                  },
                                ],
                              },
                              {
                                id: 10007,
                                label: '数组监听',
                                children: [
                                  {
                                    id: 10008,
                                    label: '变异方法重写',
                                    children: [],
                                  },
                                ],
                              },
                            ],
                          },
                        ],
                      },
                    ],
                  },
                  {
                    id: 10009,
                    label: '依赖收集',
                    children: [
                      {
                        id: 10010,
                        label: 'Dep类',
                        children: [
                          {
                            id: 10011,
                            label: '订阅者管理',
                            children: [],
                          },
                          {
                            id: 10011,
                            label: '订阅者管理1',
                            children: [],
                          },
                        ],
                      },
                    ],
                  },
                ],
              },
              {
                id: 10012,
                label: '虚拟DOM',
                children: [
                  {
                    id: 10013,
                    label: 'VNode',
                    children: [
                      {
                        id: 10014,
                        label: 'Patch算法',
                        children: [],
                      },
                    ],
                  },
                ],
              },
            ],
          },
          {
            id: 2,
            label: '基础概念',
            children: [
              {
                id: 3,
                label: '响应式数据',
                children: [
                  {
                    id: 101,
                    label: 'Object.defineProperty',
                    children: [
                      { id: 1001, label: '数据劫持', children: [] },
                      { id: 1002, label: '属性描述符', children: [] },
                    ],
                  },
                  {
                    id: 102,
                    label: 'getter/setter',
                    children: [
                      { id: 1003, label: '访问器属性', children: [] },
                      { id: 1004, label: '计算属性实现', children: [] },
                    ],
                  },
                  {
                    id: 103,
                    label: '依赖收集',
                    children: [
                      { id: 1005, label: 'Watcher', children: [] },
                      { id: 1006, label: 'Dep', children: [] },
                      { id: 1007, label: 'Observer', children: [] },
                    ],
                  },
                  { id: 104, label: '数组变异方法', children: [] },
                ],
              },
              {
                id: 4,
                label: '组件系统',
                children: [
                  { id: 105, label: '全局组件', children: [] },
                  { id: 106, label: '局部组件', children: [] },
                  { id: 107, label: '单文件组件', children: [] },
                  { id: 108, label: '动态组件', children: [] },
                ],
              },
              {
                id: 5,
                label: '模板语法',
                children: [
                  { id: 109, label: '插值表达式', children: [] },
                  { id: 110, label: '指令', children: [] },
                  { id: 111, label: '缩写', children: [] },
                  { id: 112, label: '过滤器', children: [] },
                ],
              },
            ],
          },
          {
            id: 6,
            label: '核心功能',
            children: [
              {
                id: 7,
                label: '计算属性',
                children: [
                  { id: 113, label: '缓存机制', children: [] },
                  { id: 114, label: 'getter/setter', children: [] },
                ],
              },
              {
                id: 8,
                label: '侦听器',
                children: [
                  { id: 115, label: 'watch', children: [] },
                  { id: 116, label: 'immediate', children: [] },
                  { id: 117, label: 'deep', children: [] },
                ],
              },
              {
                id: 9,
                label: '条件渲染',
                children: [
                  { id: 118, label: 'v-if', children: [] },
                  { id: 119, label: 'v-else', children: [] },
                  { id: 120, label: 'v-else-if', children: [] },
                  { id: 121, label: 'v-show', children: [] },
                ],
              },
              {
                id: 10,
                label: '列表渲染',
                children: [
                  { id: 122, label: 'v-for', children: [] },
                  { id: 123, label: 'key属性', children: [] },
                  { id: 124, label: '数组更新检测', children: [] },
                  { id: 125, label: '对象变更检测', children: [] },
                ],
              },
            ],
          },
          {
            id: 11,
            label: '进阶特性',
            children: [
              {
                id: 12,
                label: '组件通信',
                children: [
                  {
                    id: 126,
                    label: 'Props',
                    children: [
                      { id: 1008, label: '类型验证', children: [] },
                      { id: 1009, label: '默认值', children: [] },
                      { id: 1010, label: '必填项', children: [] },
                      { id: 1011, label: '单向数据流', children: [] },
                    ],
                  },
                  {
                    id: 127,
                    label: '自定义事件',
                    children: [
                      { id: 1012, label: '$emit', children: [] },
                      { id: 1013, label: 'v-on监听', children: [] },
                      { id: 1014, label: '事件修饰符', children: [] },
                    ],
                  },
                  { id: 128, label: '依赖注入', children: [] },
                  { id: 129, label: 'Refs', children: [] },
                ],
              },
              {
                id: 13,
                label: '插槽',
                children: [
                  { id: 130, label: '默认插槽', children: [] },
                  { id: 131, label: '具名插槽', children: [] },
                  { id: 132, label: '作用域插槽', children: [] },
                ],
              },
              {
                id: 14,
                label: '自定义指令',
                children: [
                  { id: 133, label: '钩子函数', children: [] },
                  { id: 134, label: '指令参数', children: [] },
                  { id: 135, label: '动态指令参数', children: [] },
                ],
              },
              {
                id: 15,
                label: '混入',
                children: [
                  { id: 136, label: '局部混入', children: [] },
                  { id: 137, label: '全局混入', children: [] },
                  { id: 138, label: '选项合并策略', children: [] },
                ],
              },
              {
                id: 139,
                label: '过渡与动画',
                children: [
                  { id: 140, label: 'transition组件', children: [] },
                  { id: 141, label: 'transition-group', children: [] },
                  { id: 142, label: 'JavaScript钩子', children: [] },
                ],
              },
              {
                id: 143,
                label: '可复用性',
                children: [
                  { id: 144, label: '过滤器', children: [] },
                  { id: 145, label: '渲染函数', children: [] },
                  { id: 146, label: '函数式组件', children: [] },
                ],
              },
            ],
          },
          {
            id: 16,
            label: '状态管理',
            children: [
              {
                id: 17,
                label: 'Vuex',
                children: [
                  {
                    id: 147,
                    label: 'State',
                    children: [
                      { id: 1015, label: '单一状态树', children: [] },
                      { id: 1016, label: 'mapState', children: [] },
                    ],
                  },
                  {
                    id: 148,
                    label: 'Getters',
                    children: [
                      { id: 1017, label: '派生状态', children: [] },
                      { id: 1018, label: 'mapGetters', children: [] },
                    ],
                  },
                  {
                    id: 149,
                    label: 'Mutations',
                    children: [
                      { id: 1019, label: '提交载荷', children: [] },
                      { id: 1020, label: 'mapMutations', children: [] },
                      { id: 1021, label: '同步操作', children: [] },
                    ],
                  },
                  {
                    id: 150,
                    label: 'Actions',
                    children: [
                      { id: 1022, label: '异步操作', children: [] },
                      { id: 1023, label: 'context对象', children: [] },
                      { id: 1024, label: 'mapActions', children: [] },
                      { id: 1025, label: '组合Actions', children: [] },
                    ],
                  },
                  {
                    id: 151,
                    label: 'Modules',
                    children: [
                      { id: 1026, label: '命名空间', children: [] },
                      { id: 1027, label: '嵌套模块', children: [] },
                      { id: 1028, label: '动态模块', children: [] },
                    ],
                  },
                ],
              },
              {
                id: 18,
                label: 'Event Bus',
                children: [
                  { id: 152, label: '创建', children: [] },
                  { id: 153, label: '事件发送', children: [] },
                  { id: 154, label: '事件监听', children: [] },
                  { id: 155, label: '销毁', children: [] },
                ],
              },
            ],
          },
          {
            id: 156,
            label: '路由管理',
            children: [
              {
                id: 157,
                label: 'Vue Router',
                children: [
                  {
                    id: 158,
                    label: '路由模式',
                    children: [
                      { id: 1029, label: 'hash模式', children: [] },
                      { id: 1030, label: 'history模式', children: [] },
                      { id: 1031, label: 'abstract模式', children: [] },
                    ],
                  },
                  { id: 159, label: '动态路由', children: [] },
                  {
                    id: 160,
                    label: '导航守卫',
                    children: [
                      { id: 1032, label: '全局守卫', children: [] },
                      {
                        id: 1033,
                        label: '路由独享守卫',
                        children: [
                          {
                            id: 2001,
                            label: 'beforeEnter',
                            children: [
                              {
                                id: 3001,
                                label: '函数签名',
                                children: [
                                  {
                                    id: 4001,
                                    label: '基本结构',
                                    children: [
                                      {
                                        id: 5001,
                                        label: 'to参数',
                                        children: [
                                          {
                                            id: 6001,
                                            label: 'path',
                                            children: [
                                              {
                                                id: 7001,
                                                label: '原始路径',
                                                children: [],
                                              },
                                              {
                                                id: 7002,
                                                label: '规范化路径',
                                                children: [],
                                              },
                                              {
                                                id: 7003,
                                                label: '绝对路径',
                                                children: [],
                                              },
                                              {
                                                id: 7004,
                                                label: '相对路径',
                                                children: [],
                                              },
                                            ],
                                          },
                                          {
                                            id: 6002,
                                            label: 'params',
                                            children: [],
                                          },
                                          {
                                            id: 6003,
                                            label: 'query',
                                            children: [],
                                          },
                                          {
                                            id: 6004,
                                            label: 'hash',
                                            children: [],
                                          },
                                          {
                                            id: 6005,
                                            label: 'fullPath',
                                            children: [],
                                          },
                                          {
                                            id: 6006,
                                            label: 'matched',
                                            children: [],
                                          },
                                        ],
                                      },
                                      {
                                        id: 5002,
                                        label: 'from参数',
                                        children: [
                                          {
                                            id: 6007,
                                            label: 'path',
                                            children: [],
                                          },
                                          {
                                            id: 6008,
                                            label: 'params',
                                            children: [],
                                          },
                                          {
                                            id: 6009,
                                            label: 'query',
                                            children: [],
                                          },
                                          {
                                            id: 6010,
                                            label: 'hash',
                                            children: [],
                                          },
                                          {
                                            id: 6011,
                                            label: 'fullPath',
                                            children: [],
                                          },
                                          {
                                            id: 6012,
                                            label: 'matched',
                                            children: [],
                                          },
                                        ],
                                      },
                                      {
                                        id: 5003,
                                        label: 'next函数',
                                        children: [
                                          {
                                            id: 6013,
                                            label: '无参数调用',
                                            children: [],
                                          },
                                          {
                                            id: 6014,
                                            label: 'false调用',
                                            children: [],
                                          },
                                          {
                                            id: 6015,
                                            label: '错误调用',
                                            children: [],
                                          },
                                          {
                                            id: 6016,
                                            label: '路径重定向',
                                            children: [],
                                          },
                                        ],
                                      },
                                    ],
                                  },
                                  {
                                    id: 4002,
                                    label: '返回值',
                                    children: [
                                      {
                                        id: 5004,
                                        label: 'undefined',
                                        children: [],
                                      },
                                      {
                                        id: 5005,
                                        label: 'false',
                                        children: [],
                                      },
                                      {
                                        id: 5006,
                                        label: '路径字符串',
                                        children: [],
                                      },
                                    ],
                                  },
                                ],
                              },
                              {
                                id: 3002,
                                label: 'next()调用',
                                children: [
                                  {
                                    id: 4003,
                                    label: '参数类型',
                                    children: [
                                      {
                                        id: 5007,
                                        label: '无参数',
                                        children: [],
                                      },
                                      {
                                        id: 5008,
                                        label: 'false',
                                        children: [],
                                      },
                                      {
                                        id: 5009,
                                        label: 'Error实例',
                                        children: [],
                                      },
                                      {
                                        id: 5010,
                                        label: '路径对象',
                                        children: [],
                                      },
                                    ],
                                  },
                                  {
                                    id: 4004,
                                    label: '调用时机',
                                    children: [
                                      {
                                        id: 5011,
                                        label: '同步调用',
                                        children: [],
                                      },
                                      {
                                        id: 5012,
                                        label: '异步调用',
                                        children: [],
                                      },
                                    ],
                                  },
                                ],
                              },
                              {
                                id: 3003,
                                label: '异步支持',
                                children: [
                                  {
                                    id: 4005,
                                    label: 'Promise处理',
                                    children: [
                                      {
                                        id: 5013,
                                        label: 'resolve',
                                        children: [],
                                      },
                                      {
                                        id: 5014,
                                        label: 'reject',
                                        children: [],
                                      },
                                    ],
                                  },
                                  {
                                    id: 4006,
                                    label: 'async/await',
                                    children: [
                                      {
                                        id: 5015,
                                        label: '错误处理',
                                        children: [],
                                      },
                                      {
                                        id: 5016,
                                        label: '超时控制',
                                        children: [],
                                      },
                                    ],
                                  },
                                ],
                              },
                            ],
                          },
                          {
                            id: 2002,
                            label: '参数验证',
                            children: [
                              {
                                id: 3004,
                                label: '路径参数验证',
                                children: [
                                  {
                                    id: 4007,
                                    label: '类型检查',
                                    children: [
                                      {
                                        id: 5017,
                                        label: '字符串',
                                        children: [],
                                      },
                                      { id: 5018, label: '数字', children: [] },
                                      {
                                        id: 5019,
                                        label: '布尔值',
                                        children: [],
                                      },
                                      {
                                        id: 5020,
                                        label: '自定义类型',
                                        children: [],
                                      },
                                    ],
                                  },
                                  {
                                    id: 4008,
                                    label: '必填验证',
                                    children: [
                                      {
                                        id: 5021,
                                        label: 'required属性',
                                        children: [],
                                      },
                                      {
                                        id: 5022,
                                        label: '自定义必填逻辑',
                                        children: [],
                                      },
                                    ],
                                  },
                                ],
                              },
                              {
                                id: 3005,
                                label: '查询参数验证',
                                children: [
                                  {
                                    id: 4009,
                                    label: '格式验证',
                                    children: [
                                      {
                                        id: 5023,
                                        label: '正则表达式',
                                        children: [],
                                      },
                                      {
                                        id: 5024,
                                        label: '枚举值',
                                        children: [],
                                      },
                                    ],
                                  },
                                  {
                                    id: 4010,
                                    label: '转换处理',
                                    children: [
                                      {
                                        id: 5025,
                                        label: '类型转换',
                                        children: [],
                                      },
                                      {
                                        id: 5026,
                                        label: '默认值处理',
                                        children: [],
                                      },
                                    ],
                                  },
                                ],
                              },
                              {
                                id: 3006,
                                label: '自定义验证函数',
                                children: [
                                  {
                                    id: 4011,
                                    label: '函数实现',
                                    children: [
                                      {
                                        id: 5027,
                                        label: '同步验证',
                                        children: [],
                                      },
                                      {
                                        id: 5028,
                                        label: '异步验证',
                                        children: [],
                                      },
                                    ],
                                  },
                                  {
                                    id: 4012,
                                    label: '错误处理',
                                    children: [
                                      {
                                        id: 5029,
                                        label: '错误消息',
                                        children: [],
                                      },
                                      {
                                        id: 5030,
                                        label: '错误重定向',
                                        children: [],
                                      },
                                    ],
                                  },
                                ],
                              },
                            ],
                          },
                          {
                            id: 2003,
                            label: '异步数据预取',
                            children: [
                              {
                                id: 3007,
                                label: 'API请求',
                                children: [
                                  {
                                    id: 4013,
                                    label: '请求方法',
                                    children: [
                                      {
                                        id: 5031,
                                        label: 'axios',
                                        children: [],
                                      },
                                      {
                                        id: 5032,
                                        label: 'fetch',
                                        children: [],
                                      },
                                      {
                                        id: 5033,
                                        label: '自定义封装',
                                        children: [],
                                      },
                                    ],
                                  },
                                  {
                                    id: 4014,
                                    label: '请求参数',
                                    children: [
                                      {
                                        id: 5034,
                                        label: '路径参数',
                                        children: [],
                                      },
                                      {
                                        id: 5035,
                                        label: '查询参数',
                                        children: [],
                                      },
                                      {
                                        id: 5036,
                                        label: '请求体',
                                        children: [],
                                      },
                                    ],
                                  },
                                ],
                              },
                              {
                                id: 3008,
                                label: '状态管理集成',
                                children: [
                                  {
                                    id: 4015,
                                    label: 'Vuex集成',
                                    children: [
                                      {
                                        id: 5037,
                                        label: 'actions调用',
                                        children: [],
                                      },
                                      {
                                        id: 5038,
                                        label: 'mutations提交',
                                        children: [],
                                      },
                                    ],
                                  },
                                  {
                                    id: 4016,
                                    label: 'Pinia集成',
                                    children: [
                                      {
                                        id: 5039,
                                        label: 'store调用',
                                        children: [],
                                      },
                                      {
                                        id: 5040,
                                        label: '组合式API',
                                        children: [],
                                      },
                                    ],
                                  },
                                ],
                              },
                              {
                                id: 3009,
                                label: '加载状态处理',
                                children: [
                                  {
                                    id: 4017,
                                    label: '全局加载',
                                    children: [
                                      {
                                        id: 5041,
                                        label: '进度条',
                                        children: [],
                                      },
                                      {
                                        id: 5042,
                                        label: '全屏遮罩',
                                        children: [],
                                      },
                                    ],
                                  },
                                  {
                                    id: 4018,
                                    label: '局部加载',
                                    children: [
                                      {
                                        id: 5043,
                                        label: '骨架屏',
                                        children: [],
                                      },
                                      {
                                        id: 5044,
                                        label: '占位内容',
                                        children: [],
                                      },
                                    ],
                                  },
                                ],
                              },
                            ],
                          },
                          {
                            id: 2004,
                            label: '权限控制',
                            children: [
                              {
                                id: 3010,
                                label: '角色验证',
                                children: [
                                  {
                                    id: 4019,
                                    label: '角色定义',
                                    children: [
                                      {
                                        id: 5045,
                                        label: '角色表设计',
                                        children: [],
                                      },
                                      {
                                        id: 5046,
                                        label: '角色继承',
                                        children: [],
                                      },
                                      {
                                        id: 5047,
                                        label: '动态角色',
                                        children: [],
                                      },
                                    ],
                                  },
                                  {
                                    id: 4020,
                                    label: '验证逻辑',
                                    children: [
                                      {
                                        id: 5048,
                                        label: '包含验证',
                                        children: [],
                                      },
                                      {
                                        id: 5049,
                                        label: '精确匹配',
                                        children: [],
                                      },
                                      {
                                        id: 5050,
                                        label: '多角色验证',
                                        children: [],
                                      },
                                    ],
                                  },
                                ],
                              },
                              {
                                id: 3011,
                                label: '权限码验证',
                                children: [
                                  {
                                    id: 4021,
                                    label: '权限码设计',
                                    children: [
                                      {
                                        id: 5051,
                                        label: '位运算',
                                        children: [],
                                      },
                                      {
                                        id: 5052,
                                        label: '字符串编码',
                                        children: [],
                                      },
                                      {
                                        id: 5053,
                                        label: '树形结构',
                                        children: [],
                                      },
                                    ],
                                  },
                                  {
                                    id: 4022,
                                    label: '验证方式',
                                    children: [
                                      {
                                        id: 5054,
                                        label: '与运算',
                                        children: [],
                                      },
                                      {
                                        id: 5055,
                                        label: '或运算',
                                        children: [],
                                      },
                                      {
                                        id: 5056,
                                        label: '非运算',
                                        children: [],
                                      },
                                    ],
                                  },
                                ],
                              },
                              {
                                id: 3012,
                                label: '重定向处理',
                                children: [
                                  {
                                    id: 4023,
                                    label: '重定向目标',
                                    children: [
                                      {
                                        id: 5057,
                                        label: '登录页',
                                        children: [],
                                      },
                                      {
                                        id: 5058,
                                        label: '无权限页',
                                        children: [],
                                      },
                                      { id: 5059, label: '首页', children: [] },
                                    ],
                                  },
                                  {
                                    id: 4024,
                                    label: '重定向参数',
                                    children: [
                                      {
                                        id: 5060,
                                        label: '原始路径',
                                        children: [],
                                      },
                                      {
                                        id: 5061,
                                        label: '错误信息',
                                        children: [],
                                      },
                                      {
                                        id: 5062,
                                        label: '时间戳',
                                        children: [],
                                      },
                                    ],
                                  },
                                ],
                              },
                            ],
                          },
                        ],
                      },
                      { id: 1034, label: '组件内守卫', children: [] },
                      { id: 1035, label: '完整导航解析流程', children: [] },
                    ],
                  },
                  { id: 161, label: '路由懒加载', children: [] },
                ],
              },
            ],
          },
          {
            id: 162,
            label: '工具链',
            children: [
              {
                id: 20000,
                label: '构建工具',
                children: [
                  {
                    id: 20001,
                    label: 'Webpack',
                    children: [
                      {
                        id: 20002,
                        label: 'Loader',
                        children: [
                          {
                            id: 20003,
                            label: 'Babel',
                            children: [
                              {
                                id: 20004,
                                label: 'Presets',
                                children: [
                                  {
                                    id: 20005,
                                    label: 'Env',
                                    children: [],
                                  },
                                  {
                                    id: 20006,
                                    label: 'React',
                                    children: [],
                                  },
                                ],
                              },
                            ],
                          },
                          {
                            id: 20007,
                            label: 'Vue Loader',
                            children: [
                              {
                                id: 20008,
                                label: 'SFC处理',
                                children: [],
                              },
                            ],
                          },
                        ],
                      },
                      {
                        id: 20009,
                        label: 'Plugin',
                        children: [
                          {
                            id: 20010,
                            label: 'HtmlWebpackPlugin',
                            children: [],
                          },
                        ],
                      },
                    ],
                  },
                  {
                    id: 20011,
                    label: 'Vite',
                    children: [
                      {
                        id: 20012,
                        label: 'ESM支持',
                        children: [],
                      },
                    ],
                  },
                ],
              },
              {
                id: 163,
                label: 'Vue CLI',
                children: [
                  { id: 1036, label: '项目创建', children: [] },
                  { id: 1037, label: '插件系统', children: [] },
                  { id: 1038, label: '配置文件', children: [] },
                  { id: 1039, label: '环境变量', children: [] },
                ],
              },
              {
                id: 164,
                label: 'Vue Devtools',
                children: [
                  { id: 1040, label: '组件检查', children: [] },
                  { id: 1041, label: '时间旅行', children: [] },
                  { id: 1042, label: '性能分析', children: [] },
                ],
              },
              {
                id: 165,
                label: '单元测试',
                children: [
                  { id: 1043, label: 'Jest', children: [] },
                  { id: 1044, label: 'Vue Test Utils', children: [] },
                  { id: 1045, label: '组件测试', children: [] },
                  { id: 1046, label: '快照测试', children: [] },
                ],
              },
              {
                id: 166,
                label: 'TypeScript支持',
                children: [
                  { id: 1047, label: '类组件', children: [] },
                  { id: 1048, label: '属性装饰器', children: [] },
                  { id: 1049, label: '类型声明', children: [] },
                ],
              },
              {
                id: 1050,
                label: '构建工具',
                children: [
                  { id: 1051, label: 'Webpack', children: [] },
                  { id: 1052, label: 'Babel', children: [] },
                  { id: 1053, label: 'ESLint', children: [] },
                ],
              },
            ],
          },
          {
            id: 167,
            label: '生命周期',
            children: [
              {
                id: 1062,
                label: '创建阶段',
                children: [
                  { id: 1063, label: '初始化事件和生命周期', children: [] },
                  { id: 1064, label: '初始化注入和校验', children: [] },
                ],
              },
              {
                id: 168,
                label: 'beforeCreate',
                children: [
                  { id: 1054, label: '实例初始化', children: [] },
                  { id: 1055, label: '无法访问data/props', children: [] },
                ],
              },
              {
                id: 169,
                label: 'created',
                children: [
                  { id: 1056, label: '可访问响应式数据', children: [] },
                  { id: 1057, label: '适合异步请求', children: [] },
                  { id: 1058, label: '未挂载DOM', children: [] },
                ],
              },
              { id: 170, label: 'beforeMount', children: [] },
              {
                id: 171,
                label: 'mounted',
                children: [
                  { id: 1059, label: 'DOM已挂载', children: [] },
                  { id: 1060, label: '可操作DOM', children: [] },
                  { id: 1061, label: '子组件已挂载', children: [] },
                ],
              },
              { id: 172, label: 'beforeUpdate', children: [] },
              { id: 173, label: 'updated', children: [] },
              { id: 174, label: 'beforeDestroy', children: [] },
              { id: 175, label: 'destroyed', children: [] },
              { id: 176, label: 'activated', children: [] },
              { id: 177, label: 'deactivated', children: [] },
            ],
          },
        ],
      },
    };
  },
  methods: {
    handleSearch() {
      if (!this.searchKeyword.trim()) {
        this.clearSearch();
        return;
      }

      this.$refs.rootNode.searchNodes(this.searchKeyword);
      this.countSearchResults();
    },

    clearSearch() {
      this.searchKeyword = '';
      this.searchCount = 0;
      this.$refs.rootNode.clearSearch();
    },

    countSearchResults() {
      // 重置计数
      this.searchCount = 0;

      // 递归计数匹配节点
      const countMatches = node => {
        if (node.isMatched) {
          this.searchCount++;
        }
        if (node.node.children && node.node.children.length) {
          node.node.children.forEach(child => {
            const childNode = this.$refs[`node_${child.id}`]?.[0];
            if (childNode) {
              countMatches(childNode);
            }
          });
        }
      };

      countMatches(this.$refs.rootNode);
    },
  },
};
</script>

<style scoped>
.mindmap-wrapper {
  padding: 40px;
  background: #f9f9f9;
  background-color: #f3f6ff;
  min-height: 100vh;
}

.search-controls {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.search-box {
  display: flex;
  gap: 10px;
  align-items: center;
}

.search-box input {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  flex: 1;
  max-width: 300px;
}

.search-box button {
  padding: 8px 16px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.search-box button:hover {
  background-color: #45a049;
}

.search-count {
  margin-left: 10px;
  color: #666;
  font-size: 14px;
}

.mindmap-root {
  display: flex;
  justify-content: center;
}

/* 层级颜色说明样式 */
.level-legend {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 15px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  max-width: 180px;
  width: 100%;
}

.legend-title {
  font-size: 12px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
  text-align: center;
  border-bottom: 1px solid #eee;
  padding-bottom: 4px;
}

.legend-items {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 8px;
  border-radius: 3px;
  transition: background-color 0.2s;
  min-height: 22px;
}

.legend-item:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.legend-color {
  width: 14px;
  height: 14px;
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

.legend-text {
  font-size: 11px;
  color: #666;
  white-space: nowrap;
  flex: 1;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .level-legend {
    max-width: 160px;
    padding: 6px 8px;
  }

  .legend-title {
    font-size: 11px;
    margin-bottom: 6px;
  }

  .legend-item {
    padding: 2px 6px;
    min-height: 20px;
    gap: 6px;
  }

  .legend-color {
    width: 12px;
    height: 12px;
  }

  .legend-text {
    font-size: 10px;
  }
}
</style>
